import { connect } from 'dva';
import * as THREE from 'three'
import { useEffect, useRef } from 'react';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'

 const BasicMeshPage = (props) => {
   const sceneRef = useRef(null)
   const cameraRef = useRef(null)
   const rendererRef = useRef(null)
   const guiRef = useRef(null)
   const width = 1000; //宽度
   const height = 800; //高度
   useEffect(()=>{
    init()
   }, [])
   const init = () => {
      // 0.添加GUI
      const eventObj = {
        Fullscreen: function(){
         document.body.requestFullscreen()
        },
        Exitscreen: () => {
          document.exitFullscreen()
        }
      }
      guiRef.current = new GUI()
      guiRef.current.add(eventObj, "Fullscreen").name('全屏')
      guiRef.current.add(eventObj, "Exitscreen").name('退出全屏')

      // 1.创建3D场景对象Scene
      sceneRef.current = new THREE.Scene();

      // 4.创建一个长方体几何对象Geometry
      setGeometry()

      // 2. 定义虚拟相机部分
      setCamera()

      // 5. 坐标辅助器
      const axesHelper = new THREE.AxesHelper(500)
      sceneRef.current.add(axesHelper)

      // 3.渲染器
      setRenderer()

      // 全屏 rendererRef.current.domElement.requestFullscreen()
      window.addEventListener("resize",()=>{
        rendererRef.current.setSize(window.innerWidth,window.innerHeight);
        cameraRef.current.aspect = window.innerWidth/window.innerHeight;
        cameraRef.current.updateProjectionMatrix()
      })

   }
   // 创建相机
   const setCamera = () => {
      // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
      cameraRef.current = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
      // 实例化一个透视投影相机对象
      // 根据需要设置相机位置具体值
      cameraRef.current.position.set(25, 25, 25);
      cameraRef.current.lookAt(0,5,0);//指向mesh对应的位置
   }
   // 创建几何体
   const setGeometry = () => {
      //  example 1：平面
      getPlaneGeomery()   
   }
   // 创建渲染器
   const setRenderer = () => {
      // 创建渲染器对象
      rendererRef.current = new THREE.WebGLRenderer();
      rendererRef.current.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
      rendererRef.current.render(sceneRef.current, cameraRef.current); //执行渲染操作
      document.getElementById('webgl').appendChild(rendererRef.current.domElement);
      // 6. 轨道控制器
      const controls = new OrbitControls(cameraRef.current, rendererRef.current.domElement)

      function animate(){
        requestAnimationFrame(animate)
        controls.update() 
        rendererRef.current.render(sceneRef.current, cameraRef.current)
      }
      animate()
   }
   // 平面
   const getPlaneGeomery = () => {
     let planeGeomery = new THREE.PlaneGeometry(2,2);
    //  创建纹理器
     let textureLoader = new THREE.TextureLoader(); 
    //  加载纹理
     let texture = textureLoader.load(require(".././assets/img2/bg-login.png"))
     texture.colorSpace = THREE.SRGBColorSpace;
     let aoMap = textureLoader.load(require(".././assets/img/yay.jpg"))
     let alphaMap = textureLoader.load(require(".././assets/img/black.jpg"))
     let lightMap = textureLoader.load(require(".././assets/img/light.jpg"))
     let specularMap = textureLoader.load(require(".././assets/img/light.jpg"))
     let rgbeLoader = new RGBELoader();
     // 有误：文件必须是有效的.hdr文件
    //  rgbeLoader.load(require(".././assets/img2/bg-login.hdr"), (envMap) => {
    //      // 设置球形贴图
    //      envMap.mapping = THREE.EquirectangularReflectionMapping;
    //      // 设置为背景
    //      sceneRef.current.background = envMap;
    //      // 给整个场景设置环境贴图
    //      sceneRef.current.environment = envMap;
    //      // 设置plane的环境贴图
    //      planeMaterial.envMap = envMap
    //  })
     let planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff,
       map: texture,//加载纹理
       transparent: true, //允许透明
       aoMap, // 环境遮挡贴图
       alphaMap, // 透明度贴图
    //    lightMap, // 光照贴图
       specularMap,
       reflectivity: 1,
    })
    // planeMaterial.map = texture; //可以这样单独设置
     let plane = new THREE.Mesh(planeGeomery, planeMaterial);

     guiRef.current.add(planeMaterial, "aoMapIntensity").min(0).max(1).name('ao贴图的强度')
     guiRef.current.add(planeMaterial, "reflectivity").min(0).max(1).name('反射强度')
     guiRef.current.add(texture, 'colorSpace', {
         sRGB: THREE.SRGBColorSpace,
         Linear: THREE.LinearSRGBColorSpace,
     }).onChange(()=>{
         texture.needsUpdate = true;
     })
    //  guiRef.current.add(planeMaterial, "alphaMapIntensity").min(0).max(1).name('alpha透明贴图的强度')
     sceneRef.current.add(plane);
   }
 
  return (
    <div>
      <h1>纹理、贴图</h1>
      <div id="webgl" style={{marginTop: 10,marginLeft: 10}}></div>
    </div>
  );
}
export default connect(({common})=>({
  userInfo: common.userInfo,
}))(BasicMeshPage)